name: "editArticle",

<template>
  <div class="article-container">
    <el-row style="margin-top: 20px;">
      <el-col :span="12" :offset="4">
        <el-form :model="formData" :rules="rules" ref="formData" label-width="110px" class="demo-formData">
          <el-row>
            <el-col :span="16">
              <el-form-item label-width="80px" label="作者:" prop="author">
                <el-input v-model="formData.author"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="button_submit" label-width="80px">
                <el-button type="primary" @click="submitForm('formData')">立即修改</el-button>
              </el-form-item>
            </el-col>

            <!--            <el-col :span="10">-->
            <!--              <el-form-item-->
            <!--                label-width="80px"-->
            <!--                style="margin-left: 100px;width: 100%"-->
            <!--                label="发布时间:"-->
            <!--                class="postInfo-container-item"-->
            <!--                prop="date">-->
            <!--                <el-date-picker-->
            <!--                  v-model="formData.date"-->
            <!--                  type="datetime"-->
            <!--                  value-format="yyyy-MM-dd HH:mm"-->
            <!--                  placeholder="选择日期时间"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label-width="80px" label="标题:" prop="title">
                <el-input v-model="formData.title" :rows="1" type="textarea" class="article-textarea" autosize
                          placeholder="请输入内容"/>
                <!--                <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item prop="content" label-width="80px" label="摘要:">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容(200字内)"
                :maxlength="200"
                v-model="formData.contentShort"
                show-word-limit>
              </el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item prop="content" label-width="80px" label="正文:">
              <!--              <el-input-->
              <!--                type="textarea"-->
              <!--                :rows="12"-->
              <!--                placeholder="请输入内容(2000字内)"-->
              <!--                :maxlength="2000"-->
              <!--                v-model="formData.content"-->
              <!--                show-word-limit>-->
              <!--              </el-input>-->
              <mavon-editor ref="md" v-model="formData.content"/>
            </el-form-item>
          </el-row>

        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {getClub} from "../../../api/club";
import {getArticle, updateArticle} from "../../../api/article";

export default {
  name: "editArticle",

  data() {
    return {
      articleId: null,
      formData: {},
      rules: {
        name: [
          {required: true, message: '请输入社团名称', trigger: 'blur'}
        ],
        clubIntroduce: [
          {required: true, message: '请输入社团简介', trigger: 'blur'}
        ],
        // administrator: [
        //   {required: true, message: '请审输入核人ID'},
        //   {type: 'number', message: 'ID号码必须是数字'}
        // ],
        clubNotice: [
          {required: true, message: '请输入社团公告', trigger: 'blur'}
        ]
      },
    }
  },
  computed: {},

  created() {
    this.articleId = this.$route.params.articleId;
    console.log("art:", this.articleId)
    this.getArticleInformation();
  },
  methods: {
    async getArticleInformation() {
      await getArticle({
        articleId: this.articleId
      }).then(res => {
        this.formData = res.data;
        console.log("info:", res.data)
      })
    },

    submitForm() {
      console.log(this.formData)
      this.formData.createTime = "";
      this.formData.updateTime = "";
      //md格式
      // this.formData.content= this.$refs.md.d_value;
      //html格式存储
      this.formData.content = this.$refs.md.d_render;
      Object.assign(this.formData)
      this.$refs.formData.validate(valid => {
        if (valid) {
          updateArticle(this.formData).then(response => {
            this.$message({
              type: 'success',
              message: '修改成功'
            });
            // this.$router.push({path: `articleList/${this.clubId}`})
            this.$router.back();
            // this.$router.push('/managerHome/clubManage')
          });
        } else {
          this.$message({
            type: 'error',
            message: '操作失败'
          });
        }
      })
    },
    draftForm() {
      if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
        this.$message({
          message: '请填写必要的标题和内容',
          type: 'warning'
        })
        return
      }
      this.$message({
        message: '保存成功',
        type: 'success',
        showClose: true,
        duration: 1000
      })
      this.postForm.status = 'draft'
    },

  }
}
</script>

<style Lang="less" scoped>
.article-container {
  //float: left;
}

</style>


